<template>
	<!-- 潮卡弹窗-->
	<view class="popup">
		<u-popup :show="moneyShow" @close="close"  round='32' zIndex='100000' closeOnClickOverlay>
			<view class="buy-box">
				<view class="">
					<view class="mb40 justify-start">
						<image class="goods-img" :src="data.image" mode=""></image>
						<view class="">
							<view class="goods-title">
								{{data.name}}
							</view>
							<view class="can-buy">
								可购买3张
							</view>
							<view class="long-price">
								¥ <text class="price-num">{{data.price}}</text>/{{data.unit}}
							</view>
						</view>
					</view>
					<view class="give-long justify-start">
						<view class="cai-bg"
							:style="{background: 'url('+'/static/images/starmap/cai-bg.png'+')  no-repeat center center',backgroundSize:'100% 100%'}">
							<image class="star" src="/static/images/yishou/star.svg" mode=""></image>
							<view class="tips">
								买卡送龙蛋{{data.subsidiary}}个
							</view>
						</view>
						<view class="longdan-box justify-center align-center">
							<image class="give-long-img" src="/static/images/starmap/longdan.png" mode="widthFix">
							</image>
	
						</view>
						<view class="">
							<view class="dan-title">
								数字龙蛋
							</view>
							<view class="dan-num">
								x1
							</view>
						</view>
					</view>
					<!-- 数量 -->
					<view class="goods-num-info justify-start align-center">
						<view class="goods-unit">
							数量
						</view>
						<view class="goods-num justify-center align-center">
							<u-number-box v-model="number">
								<view slot="minus" class="minus">
									<u-icon name="minus" size="12"></u-icon>
								</view>
								<text slot="input" style="width: 40px;text-align: center;color: #FFF;"
									class="input">{{number}}</text>
								<view slot="plus" class="plus">
									<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
								</view>
							</u-number-box>
						</view>
						<view class="max-btn">
							最大
						</view>
					</view>
					<view class="sale-btn justify-center align-center">
						已售罄
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props:{
			isShow:{
				type:Boolean,
				default:false,
			},
			data:{
				type:Object,
				default:()=>{
					return {
						image:null
					}
				},
			}
		},
		data(){
			return {
				number:1,
				moneyShow:false,
			}
		},
		watch:{
			isShow(val){
				console.log(val,'modal');
				this.moneyShow = val
				if(val){
				}
			}
		},
		methods:{
			close(){
				this.$emit('close')
			},
			async putLong(){
				let url = '/api/v1/mine_add_dragon'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url, {
					number: this.number
				})
				if (code == 200) {
					console.log(data, '静态资源');
					this.$emit('update')
					this.close()
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
			}
		}
	}
</script>

<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.popup {
		.buy-box {
			padding: 32rpx;
			background-color: #20202c;
	
			.sale-btn {
				margin: 40rpx 0 70rpx;
				background-color: rgb(142, 146, 155);
				border-radius: 8rpx;
				font-size: 30rpx;
				height: 90rpx;
				font-weight: 700;
			}
	
			.goods-num-info {
				.goods-unit {
					flex: 1;
					font-size: 1rem;
					color: rgba(255, 255, 255, .76);
				}
	
				.goods-num {
					width: 5.625rem;
					height: 2rem;
					background-color: #292838;
					border-radius: 120px;
				}
	
				.max-btn {
					margin-left: .5rem;
					width: 4.25rem;
					line-height: 2rem;
					border-radius: 100px;
					background-color: #292838;
					text-align: center;
					color: #fff;
					font-size: 1rem;
				}
			}
	
			.give-long {
				background-color: #292838;
				border-radius: .5rem;
				padding: .9375rem 1rem 1.0625rem;
				position: relative;
				margin-bottom: 1.25rem;
	
				.cai-bg {
					width: 222rpx;
					height: 60rpx;
					position: absolute;
					top: 0;
					right: 0;
					padding: 0 0 0 44rpx;
	
					.tips {
						text-align: right;
						margin: .35rem .5rem 0 0;
						color: #000;
						font-weight: 700;
						font-size: .6875rem;
					}
	
					.star {
						position: absolute;
						top: 5rpx;
						width: 14rpx;
						height: 12rpx;
					}
				}
	
				.dan-title {
					font-size: .875rem;
					color: #fff;
					line-height: 1.3125rem;
					margin-top: .0625rem;
					width: 9.375rem;
					margin-bottom: .5rem;
				}
	
				.dan-num {
					color: rgba(255, 255, 255, .6);
					font-size: .6875rem;
					line-height: 1.125rem;
				}
	
				.longdan-box {
					width: 70rpx;
					height: 92rpx;
					background: url('/static/images/starmap/longdan-bg.png') no-repeat;
					background-size: cover;
					margin-right: 18rpx;
	
					.give-long-img {
						width: 70rpx;
						height: 92rpx;
					}
				}
			}
		}
	
		.goods-title {
			width: 12.5rem;
			margin-top: .3125rem;
			font-size: 1.125rem;
			color: #fff;
			line-height: 1.5rem;
			margin-bottom: .375rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	
		.long-price {
			color: #27ff92;
			font-size: 25rpx;
	
			.price-num {
				font-size: 40rpx;
				font-weight: 700;
				margin-right: 10rpx;
			}
		}
	
		.can-buy {
			color: rgba(255, 255, 255, .6);
			font-size: .75rem;
			line-height: 1.125rem;
			margin-bottom: 1.125rem;
		}
	
		.goods-img {
			width: 200rpx;
			height: 200rpx;
			margin-right: 32rpx;
		}
	}
</style>